<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            margin: 30px auto;
            width: 600px;
            min-height: 30px;
            border: 8px solid darkseagreen;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            background: pink;
        }

        div span {
            width: 100px;
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: center;
            align-content: center;
        }

        .active {
            background: lightgreen;
            color: red;
            font-size: 18px;
            box-sizing: border-box;
            border: 1px solid aqua;
        }

        button:nth-of-type(1) {
            margin-left: 40%;
        }

        button {
            width: 100px;
            height: 40px;
            font-size: 20px;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div id="box">

        <h1>1111111</h1>
    </div>
    <button>点一个</button>
    <button>点五个</button>
    <button>重置</button>
    <!-- <script src="../js/utils.js"></script> -->
    <script>
        var arr = ["孙莹晖", "宋波", "韩轲辛", "季观珲", "李志晶", "王阳", "延泽邦", "时忠诚", "陈令宣", "张志民", "王群", "刘昌龙", "吕梦冉", "刘爽", "薛澳楠", "毕研妍", "王允", "王善鹏", "李明泽", "魏奉芝", "倪小龙", "周佳佳", "魏明娟", "伏思展", "毕宝鑫", "杨明雨", "邹明琦", "徐继宇", "张海琦", "张初晓", "韩胜男", "王成斌", "王硕", "赵晓峰", "王玉乾", "杨嘉伟", "孙晋枫", "熊旭东", "臧方印", "宋屹", "王豪", "张家浩", "吴明航", "朱祺威", "徐志会", "王树禹", "寇春阳", "王和龙", "刘豪", "王振宇", "刘1豪"]

        var arr1 = []
        //1.准备随机整数函数
        function rangeRandom(a, b) {
            var max = Math.max(a, b)
            var min = Math.min(a, b)
            var res = Math.floor(Math.random() * (max - min + 1)) + min
            return res
        }


        //2.获取元素
        var box = document.getElementById("box")
        var btn1 = document.querySelector("button:nth-of-type(1)")
        var btn2 = document.querySelector("button:nth-of-type(2)")
        var btn3 = document.querySelector("button:nth-of-type(3)")

        //3.输出页面
        var str = ""
        for (var i = 0; i < arr.length; i++) {
            str += `<span>${arr[i]}</span>`
        }
        box.innerHTML = str
        var span = document.querySelectorAll("div span")

        //4.随机点名 一个
        var reset = []
        // var cloose = ""
        btn1.onclick = function () {
            //如果 arr 数组里还有名字 就正常输出 ，如果没有，就提示清空
            if (reset.length < arr.length) {
                //判断reset里是否有重复的
                do {
                    var tmp = rangeRandom(0, arr.length - 1)
                } while (reset.indexOf(arr[tmp]) !== -1);
                //排他 
                for (var i = 0; i < arr.length; i++) {
                    span[i].className = ""
                }
                //写入样式
                span[tmp].className = "active"
                //把重复的放进新数组  
                reset.push(arr[tmp])

            } else {
                alert("请按重置按钮")
            }
        }

        //五个 
        btn2.onclick = function () {
            //数组去重，保证有五个
            if (reset.length < arr.length) {
                var tmpArr = []
                
                while (tmpArr.length !== 5 && reset.length !== arr.length) {
                    var tmp = rangeRandom(0, arr.length - 1)
                    //如果临时数组没有原数组的数据，就吧数据保存的临时数组，并保存索引值
                    if (reset.indexOf(arr[tmp]) === -1) {
                        // 将已点的添加到临时数组
                        reset.push(arr[tmp])
                        tmpArr.push(tmp)
                    }
                }
                //排他 去除样式
                for (var i = 0; i < arr.length; i++) {
                    span[i].className = ""
                }
                //添加样式
                for (var i = 0; i < tmpArr.length; i++) {
                    span[tmpArr[i]].className = "active"
                }
                console.log(reset);
            } else {
                alert("请按重置按钮")
            }
        }

        //重置按钮
        btn3.onclick = function () {
            //清空reset
            reset.length = 0
            //清空样式
            for (var i = 0; i < arr.length + reset.length; i++) {
                span[i].className = ""
            }

        }


        // 页面中有两个按钮 第一个按钮点一个 第二按钮点五个 
        // 点到的同学的名字 页面中要对应的变成红色
        // 点五个就是五个 不能多不能少
        console.log(window);
    </script>
</body>

</html>